<template>
    <div class="comnent">
      <div class="" style="display: flex;">
        <div class="system">
        <div class="list"  v-for="item in systemData">
           
            <router-link :to="item.path">
              <img :src="item.icon" class="ima" alt="Logo" />
              <div>
              {{ item.name }}
              </div>
            </router-link>
        </div>
      </div>
      </div>
    </div>
    <div @click="handleClick">
      点我登录
    </div>
</template>
<script setup>
import { reactive } from 'vue';

const systemData = reactive(
  [
    {
      id: 1,
      icon:'/images/yunyin.png',
      name: '运营系统', 
      path: '/detection',
    },{
      id: 1,
      icon:'/images/yunyin.png',
      name: '数据检测', 
      path: '/operation',

    },{
      id: 1,
      icon:'/images/yunyin.png',
      name: '数据大屏', 
      path: '/operation',
    }
  ]
)

const handleClick = (path) => {
  localStorage.setItem('token',new Date().getTime());
  }
</script>

<style scoped >
.pd-10{
  padding: 10px;
}
.pd-20{
  padding: 20px;
}
.comnent{
  background: #0e202e;
  background-size: contain;
  /* filter: blur(8px); */
  background-image: url('/images/bg.png'),linear-gradient(rgba(255, 255, 255, 0.5), rgba(0, 0, 0, 0.5));
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.system{
  padding: 10px;
  display: flex;
  justify-content: space-between; 
}
.system .list{
 cursor: pointer;
  background-color: #ffffff;
  border-radius: 10px;
  margin-bottom: 10px; 
  margin: 10px 10px;
  text-align: center;
  color: #6893df;
  font-size: 20px;
  font-weight: 600;
   width: auto;
   padding: 15px 30px;
          
}

.system.list img{
  width: 100px;
  background: #f00;
  height: 100px;
}
</style>
